<template>
  <Draggable
    v-slot="{ x, y }"
    p="x-4 y-2"
    style="position: fixed;z-index: 99;"
    :initial-value="{ x: innerWidth / 3.6, y: 240 }"
    :prevent-default="true"
    :handle="handle"
    v-if="showEdit"
  >
    <div class="JDialog" :style="{width: width+'px', height: height+'px'}" >
      <div ref="handle" class="top cursor-move">
        <div class="titles">
          {{titles}}
        </div>
        <div class="icon">

          <lbtn class="close" @click="close" name="ele-Close" :size="22">关闭</lbtn>
        </div>
      </div>
      <div style="flex: 1;padding: 10px 20px;">
        <JForm
          :rule="rule"
          ref="editRef"
          v-model:api="fApi"
          v-model="val"
        />
      </div>
      <div class="footer">
        <div style="flex: 1;text-align: left;padding-left: 10px;">
          <JCheck v-model="saveContinue" label="保存后继续" />
        </div>
        <lbtn type="primary" size="large" style="width: 130px;" @click="save">保 存</lbtn>
        <lbtn @click="close" style="width: 90px;" size="large">取消</lbtn>
      </div>
    </div>
  </Draggable>

</template>

<script setup name="JEditor">
// 弹出编辑页面
import tool from '@/utils/tool';
import bus from "@/store/bus";
import { isClient } from '@vueuse/shared'
import { useDraggable } from '@vueuse/core'
import { UseDraggable as Draggable } from './drag'
import {ref,nextTick, } from "vue";
const fApi = ref({})
const val = ref({})
const pars = ref({})
const rule = ref([])
const saveContinue = ref(false)
const showEdit = ref(false)
const show = ref(false)
const editRef = ref(null)
const handle = ref(null)
const el = ref(null)
const width = ref(500)
const height = ref(400)
const left = ref(70)
const saveUrl = ref('')
const titles = ref('')
const innerWidth = isClient ? (window.innerWidth ) : 200
const { x, y  } = useDraggable(el, {
  initialValue: { x: innerWidth / 4.2, y: 80 },
  preventDefault: true,
})
const open = ({ title, params }) => {
  if(showEdit.value) {
    fApi.value.resetFields()
  }
  titles.value = title
  if(params.height) {
    height.value = params.height
  }
  if(params.width) {
    width.value = params.width
  }
  pars.value = params
  nextTick(() => {
    showEdit.value = true
    left.value = ((window.innerWidth - 70) / 2) - width.value / 2
  })
  getParams()
}

const getParams = () => {
  if (pars.value.rule) {
    bus.$emit('doLoading', true)
    rule.value = tool.xe.clone(pars.value.rule, true);
    show.value = true;
    // const {x, y, style} = useDraggable(el, {
    //   initialValue: {x: 40, y: 40}
    // })
    setTimeout(() => {
      fApi.value.nextTick(() => {
        if (pars.value.initData) {
          for (let i = 0; i < rule.value.length; i++) {
            if (typeof pars.value.initData[rule.value[i].field] !== 'undefined')
              val.value[rule.value[i].field] = pars.value.initData[rule.value[i].field];
          }
        }
      });
      setTimeout(() => {
        bus.$emit('doLoading',false)
      }, 300)
    }, 10);
  }
  else {
    tool.post('page/getEditFormRule', { whichPage: pars.value.whichPage }, true).then((ret) => {
      if (ret.data.saveUrl) {
        saveUrl.value = ret.data.saveUrl;
      }
      rule.value = new Function('_tool', 'return ' + ret.data.rule)(tool);
      show.value = true;
      nextTick(() => {
        fApi.value.nextTick(() => {
          if (pars.value.row) {
            for (let i in val.value) {
              if (typeof pars.value.row[i] !== 'undefined') val.value[i] = pars.value.row[i];
            }
          }
        });
      });
    });
  }
}
const close = () => {
  clear()
  showEdit.value = false
}
const clear = () => {
  pars.value = {}
  rule.value = []
  val.value = {}
  saveUrl.value = ''
  titles.value = ''
  fApi.value.resetFields()
  saveContinue.value = false
}
const save = () => {
  editRef.value.submit((formData) => {
    for (let i in formData) {
      if (typeof formData[i] === 'undefined') formData[i] = null;
    }
    let updata = { ...pars.value, formData };
    tool.post(pars.value.saveUrl ? pars.value.saveUrl : 'page/saveForm', updata).then((ret) => {
      if (ret.stat) {
        if (typeof pars.value.refresh === 'function') {
          pars.value.refresh();
        }
        if (typeof pars.value.saved === 'function') {
          pars.value.saved(ret.data);
        }
        if (saveContinue.value) {
          fApi.value.resetFields();
        } else {
          close();
        }
      }
    });
  });
}
defineExpose({
  open
})
</script>

<style scoped lang="scss">
.JDialog {
  border-radius: 2px;
  background-color: white;
  box-shadow: 0 0 5px 2px #e2e2e2;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  :deep(.el-form-item) {
    margin-bottom: 5px !important;
  }
  .top {
    width: 100%;
    border-bottom: var(--el-border);
    height: 40px;padding-right: 5px;padding-top: 10px;
    display: flex;
    .titles {
      flex: 1;
      text-align: left;
      padding-left: 10px;
      font-size: 13px;
      font-weight: bold;
      color: #656D78;
    }
    .close {
      color: #656D78;
      &:hover {
        cursor: pointer;
        color: #1e9fff;
      }
    }
  }
  .footer {
    border-top: var(--el-border);
    background-color: white;
    text-align: right;
    padding-right: 10px;
    display: flex;
    border-top: 1px solid #e2e2e2;
    height: 50px;
    padding-top: 5px;
  }

}
</style>